<script setup lang='ts'>
import { ArrowRight } from '@element-plus/icons-vue'
import contentpc from "../../components/pc/contentpc.vue";
import { getTitleM, getTitleMaterial, selectPCGetMaterial } from "../../api/api";
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
const num = ref(0)
const title = ref()
const data = ref()
const thisSelectData = (e: number, title: string) => {
    num.value = e
    router.push({ name: 'select', query: { title, num: e, isrouter: '1' } })
    if (e === 0) {
        getData()
        getallData()
    } else {
        getTitleData(title)
    }
}
//获取全部素材
const getData = async () => {
    const res = await getTitleM()
    title.value = res.data.data
    title.value.unshift({ title: '全部' });
}
//获取指定标题素材
const getTitleData = async (e: any) => {
    const res = await getTitleMaterial({ title: e })
    data.value = res.data.data
}
//获取所有素材
const getallData = async () => {
    const res = await selectPCGetMaterial()
    data.value = res.data.data
}
onMounted(async () => {
    getData()
    num.value = Number(route.query.num)
    if (num.value === 0) {
        getallData()
    } else {
        getTitleData(route.query.title)
    }
})
</script>

<template>
    <div class="contentpc">
        <div class="h"></div>
        <div class="headerData">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>素材库</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="select">
            <div class="title">分类大全：</div>
            <div class="data">
                <a href="javascript:;" :class="['list', num === index ? 'thisList' : '']" v-for="(i, index) in title"
                    @click="thisSelectData(index, i.title)">
                    {{ i.title }}
                </a>
            </div>
        </div>
        <contentpc :data="data" :isTrue="true"></contentpc>
    </div>

</template>

<style scoped>
.contentpc {
    background-color: #f5f2f0;
    min-height: 100vh !important;
}

.title {
    box-sizing: border-box;
    padding: 10px;
}

.list {
    min-width: 20px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    margin-left: 10px;
    transition: background-color 0.8s ease, color 0.8s ease;
}

.list:hover {
    background-color: #39364dc7;
    color: white;
}

.thisList {
    background-color: #39364dc7;
    color: white;
}
a{
    color: black;
}
.data {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.h {
    height: 20px;
}

.headerData {
    max-width: 1500px;
    margin: auto;
    margin-top: 60px;
}

.select {
    max-width: 1500px;
    margin: auto;
    margin-top: 20px;
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    display: grid;
    grid-template-columns: 8% 92%;
}
</style>